<template>
  <div class="home-container">
    <el-container>
      <el-header>
        <div class="left"></div>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          style="margin: 0 auto"
        >
          <el-menu-item index="1">商店主页</el-menu-item>
          <el-menu-item index="2" @click="navigateTo('/cart')">
            购物车
          </el-menu-item>
        </el-menu>
        <div class="line">
          <el-link @click="navigateTo('/order')" target="_blank">
            我的订单
          </el-link>
          &emsp;|&emsp;
          <el-link @click="deleteUser()" target="_blank">注销账户</el-link>
        </div>
      </el-header>
      <div class="main">
        <!-- 使用SwpierImage组件 -->
        <swiper-image :SlideImageData="SlideImageData" />
        <div class="product-box">
          <!-- 使用 brick 组件 -->
          <brick :productData="productData" />
        </div>
      </div>
    </el-container>
  </div>
</template>

<script>
// 导入组件
import Brick from '@/components/Brick.vue'
import SwiperImage from '@/components/SwiperImage.vue'

export default {
  name: 'UserHome',
  components: {
    //注册组件
    Brick,
    SwiperImage,
  },
  data() {
    return {
      productData: {},
      SlideImageData: {},
      activeIndex: '1', // 默认激活的菜单项
    }
  },
  mounted() {
    this.getProductData()
    this.getSlideImageData()
  },
  methods: {
    //导航栏跳转
    navigateTo(path) {
      this.$router.push(path)
    },
    //注销用户
    deleteUser() {
      const token = localStorage.getItem('jwtToken') // 获取存储的 token
      this.$confirm('此操作将永久注销该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$http.delete('/api/user', {
            headers: { Authorization: `Bearer ${token}` },
          })
          this.$message({
            type: 'success',
            message: '注销成功!',
          })
          // 删除成功，清除 localStorage 中的 jwtToken
          localStorage.removeItem('jwtToken')
          // 跳转到登录页面
          this.$router.push('/login')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    //获取产品数据
    getProductData() {
      const token = localStorage.getItem('jwtToken') // 获取存储的 token

      this.$http
        .get('/api/home/product', {
          headers: {
            Authorization: `Bearer ${token}`, // 使用 Bearer 方案
          },
        })
        .then((res) => {
          this.productData = res.data
          console.log(this.productData.data)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 获取轮播图数据
    getSlideImageData() {
      const token = localStorage.getItem('jwtToken') // 获取存储的 token

      this.$http
        .get('/api/home/images', {
          headers: {
            Authorization: `Bearer ${token}`, // 使用 Bearer 方案
          },
        })
        .then((res) => {
          this.SlideImageData = res.data
          console.log(this.SlideImageData.data)
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
}
</script>

<style scoped>
.home-container {
  margin: 20px;
}

.product-box {
  max-width: 1280px;
  /* 最大宽度限制为1280px */
  margin: 0 auto;
  /* 自动水平居中 */
  width: 100%;
  /* 让宽度随屏幕自适应，但不会超过max-width的限制 */
  padding: 0px 12px 0px 0px;
  /* 添加内边距,上右下左 */
}

.el-header {
  display: flex;
  justify-content: space-between;
}
.left {
  width: 120px;
}
.line {
  width: 150px;
  display: flex;
  align-items: center;
}

.main {
  padding-top: 20px;
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  border-radius: 6px;
}

.bg-purple-dark {
  background: #99a9bf;
}
</style>
